<!--
 * @Description: 实现大屏Panel面板
 * @Author: your name
 * @Date: 2024-09-10 09:36:27
 * @version: 
 * @LastEditors: your name
 * @LastEditTime: 2024-09-10 14:34:24
-->
<template>
  <div
    :class="[
      panel,
      props.title == '运营统计' ? 'yytj' : '',
      props.title == '线路概览' ? 'xlgl' : '',
      props.title == '地铁活动' ? 'dthd' : '',
      props.title == '客流指标' ? 'klzb' : '',
      props.title == '告警趋势' ? 'gjqs' : '',
      props.title == '实时影像' ? 'ssyx' : '',
    ]"
  >
    <div class="head">
      <span>{{ props.title }}</span>
      <i
        v-if="props.title == '线路概览'"
        class="iconfont metro-quanping_o fullscreen-btn"
        @click="toggleFullscreen"
      ></i>
    </div>
    <div class="content">
      <slot name="content">
        <yytj v-if="props.title == '运营统计'"></yytj>
        <xlgl v-if="props.title == '线路概览'" ref="lineOverviewRef"></xlgl>
        <klzb v-if="props.title == '客流指标'"></klzb>
        <gjqs v-if="props.title == '告警趋势'"></gjqs>
        <dthd v-if="props.title == '地铁活动'"></dthd>
        <ssyx v-if="props.title == '实时影像'"></ssyx>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import yytj from './Panel-Components/OperationStatistics.vue'
import xlgl from './Panel-Components/LineOverview.vue'
import klzb from './Panel-Components/PassengerFlowIndex.vue'
import gjqs from './Panel-Components/WarmingTrend.vue'
import dthd from './Panel-Components/SubwayActivies.vue'
import ssyx from './Panel-Components/RealTimeVideo.vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})

const lineOverviewRef = ref(null)

const toggleFullscreen = () => {
  if (lineOverviewRef.value) {
    lineOverviewRef.value.toggleFullscreen()
  }
}
</script>
<style scoped>
.panel {
  min-width: 300.006px;
  min-height: 190.006px;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.yytj {
  top: 6%;
  left: 5px;
}

.dthd {
  top: 37%;
  left: 5px;
}

.klzb {
  top: 64%;
  left: 5px;
}

.xlgl {
  top: 6%;
  right: 5px;
}

.gjqs {
  top: 37%;
  right: 5px;
}

.ssyx {
  top: 64%;
  right: 5px;
}

.panel .head {
  width: 500px;
  height: 45px;
  background: url('../assets/uiResources/panel-header.png');
  background-size: cover;
  font-family: '等线Bold';
  letter-spacing: 1px;
}

.panel .head span {
  display: inline-block;
  font-size: 21px;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height: 100%;
  line-height: 45px;
  margin-left: 38px;
  margin-top: 2px;
}

.panel .content {
  width: 500px;
  flex: 1;
  background: url('../assets/uiResources/panel-content.png');
  background-size: 100% 100%;
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.4);
}

.fullscreen-btn {
  position: absolute;
  right: 10px;
  top: 20%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 20px;
  color: #fff;
}

.fullscreen-btn:hover {
  color: #ffd700;
}
</style>
